<template>
  <Button @click="instance('info')">Info</Button>
  <Button @click="instance('success')">Success</Button>
  <Button @click="instance('warning')">Warning</Button>
  <Button @click="instance('error')">Error</Button>
  <Button @click="instance('confirm')">confirm</Button>
  <Divider></Divider>
  <Button @click="confirm">Normal</Button>
  <Button @click="custom">Custom button text</Button>
  <Button @click="async">Asynchronous closing</Button>
  <p>Name: {{ value }}</p>
  <p>
    <Button @click="handleRender">Custom content</Button>
  </p>

  <Button @click="handleShowAsyncModal">async Modal</Button>
  <Modal v-model="modelValue" :loading="loading" @on-ok="handleOk"></Modal>
</template>
<script>
import ViewUI from '../../src/index';
export default {
  data() {
    return {
      value: '',
      modelValue: false,
      loading: false,
    };
  },
  methods: {
    handleShowAsyncModal() {
      this.modelValue = true;
    },
    handleOk() {
      this.loading = true;
      // 修改成异步执行
      this.$nextTick(() => (this.loading = false));
      setTimeout(() => {
        this.modelValue = false;
      }, 1000);
    },
    instance(type) {
      const title = '提示';
      const content = '确认要删除这条数据吗?';
      switch (type) {
        case 'info':
          this.$Modal.info({
            title: title,
            content: content,
            onOk: () => {
              this.$Message.info('Clicked ok');
            },
          });
          break;
        case 'success':
          this.$Modal.success({
            title: title,
            content: content,
          });
          break;
        case 'warning':
          this.$Modal.warning({
            title: title,
            content: content,
          });
          break;
        case 'error':
          this.$Modal.error({
            title: title,
            content: content,
          });
          break;
        case 'confirm':
          this.$Modal.confirm({
            title: title,
            content: content,
          });
          break;
      }
    },
    confirm() {
      this.$Modal.confirm({
        title: 'Title',
        content: '<p>Content of dialog</p><p>Content of dialog</p>',
        onOk: () => {
          this.$Message.info('Clicked ok');
        },
        onCancel: () => {
          this.$Message.info('Clicked cancel');
        },
      });
    },
    custom() {
      this.$Modal.confirm({
        title: 'Title',
        content: '<p>Content of dialog</p><p>Content of dialog</p>',
        okText: 'OK',
        cancelText: 'Cancel',
      });
    },
    async() {
      this.$Modal.confirm({
        title: 'Title',
        content: '<p>The dialog box will be closed after 2 seconds</p>',
        loading: true,
        onOk: () => {
          setTimeout(() => {
            this.$Modal.remove();
            this.$Message.info('Asynchronously close the dialog box');
          }, 2000);
        },
      });
    },
    handleRender() {
      this.$Modal.confirm({
        render: h => {
          return h(ViewUI.Input, {
            // todo 不能直接写 'Input' ?
            modelValue: this.value,
            autofocus: true,
            placeholder: 'Please enter your name...',
            'onUpdate:modelValue': val => (this.value = val),
          });
        },
      });
    },
  },
};
</script>
